<template>
    <editor v-model="myValue" :init="init"></editor>
</template>
   
<script setup lang="ts">
import { uploadFile } from "@/api/file";
//JS部分
//在js中引入所需的主题和组件
import tinymce from "tinymce/tinymce";
import "tinymce/skins/content/default/content.css";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme";
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
import "tinymce/models/dom"; // 这里是个坑 一定要引入

//在TinyMce.vue中接着引入相关插件
import "tinymce/icons/default/icons";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/code"; // 源码
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/preview"; //预览
// import 'tinymce/plugins/paste'; //粘贴插件
// import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/codesample";
// import "tinymce/plugins/searchreplace";
import "tinymce/plugins/link";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autolink";
import "tinymce/plugins/anchor";
// import "tinymce/plugins/axupimgs/plugin.js";
// import "tinymce/plugins/fullpage";
const emits = defineEmits(["getContent"]);
//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
    value: {
        type: String,
        default: () => {
            return "";
        },
    },
    baseUrl: {
        type: String,
        default: "",
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    plugins: {
        type: [String, Array],
        // default: "lists image media table wordcount fullscreen",
        default:
            " wordcount table preview  fullscreen  codesample  autosave autolink anchor  autolink image media lists  link code   image",
    },
    toolbar: {
        type: [String, Array],
        default:
            "  fontsize fontfamily bold  italic lineheight underline alignleft aligncenter alignright alignjustify anchor | undo redo |  formatselect | forecolor backcolor | bullist numlist outdent indent | lists link image media  table  | removeformat | fullscreen|preview code  codesample|searchreplace   ",
    }, //必填
    objId: {
        type: Object,
        default: {},
    }
});
// watch(()=>props.objId,(id,old)=>{
//   console.log(id,'xinid')
//   id=newId
// })
console.log(props.objId.newId, '++++++++++++++')
//用于接收外部传递进来的富文本
const myValue = ref(props.value);
const { proxy }: any = getCurrentInstance();
//定义一个对象 init初始化
const init = reactive({
    // selector: "textarea",
    language_url: "tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
    language: "zh_CN", //语言
    //自动聚焦
    auto_focus: true,
    skin_url: "tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
    height: 400, //编辑器高度

    branding: false, //是否禁用“Powered by TinyMCE”
    menubar: true, //顶部菜单栏显示
    image_dimensions: false, //去除宽高属性
    plugins: props.plugins, //这里的数据是在props里面就定义好了的
    toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
    // images_upload_url: "/news/picUpload",
    //  paste_convert_word_fake_lists: true, // 插入word文档需要该属性
    font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
    font_family_formats:
        "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
    line_height_formats: "1 1.2 1.4 1.6 2",
    paste_webkit_styles: "all",
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false,
    file_picker_types: "file image media",
    content_css: "tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

    // 文件上传
    file_picker_callback: (callback: any, value: any, meta: any) => {
        //,,m4v,avi,wmv,rmvb,mov,mpg,mpeg,webm
        let filetype =
            ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4,.mkv, .avi,.wmv, .rmvb,.mov,.mpg,.mpeg,.webm, .jpg, .jpeg, .png, .gif"; //限制文件的上传类型
        let inputElem = document.createElement("input"); //创建文件选择
        inputElem.setAttribute("type", "file");
        inputElem.setAttribute("accept", filetype);
        inputElem.click();
        inputElem.onchange = () => {
            if (!inputElem.files) {
                return
            }
            let file = inputElem.files[0]; //获取文件信息

            const formdate = new FormData();
            formdate.append("file", file);
            return uploadFile(formdate).then((res) => {
                console.log(res)
                callback(`${proxy.$imageBaseUrl}${res.data}`)
            })
        }
    }
})


//监听外部传递进来的的数据变化
watch(
    () => props.value,
    () => {
        myValue.value = props.value;
        emits("getContent", myValue.value);
    }
);
//监听富文本中的数据变化
watch(
    () => myValue.value,
    () => {
        emits("getContent", myValue.value);
    }
);
//在onMounted中初始化编辑器
onMounted(() => {
    tinymce.init({});
});
</script>